<template>
    <page-header 
     @handleAddClickEmit="handleAddClick"
     ></page-header>
     <page-table :tableData="data" :tableList="list" :isselection="true" :isSite="true"
         @handleEditClickEmit="handleEditClick"
         @handleDleClickEmit="handleDleClickEmit"
         @handleSelectionChangeEmit="handleSelectionChange"
 
         >
     </page-table>
    <div class="page-pagination">
     <page-pagination :total="tableSize" @handleCurrentChangeEmit="handleCurrentChange"></page-pagination>
    </div>
    <!-- 抽屉 -->
    <page-drawer 
    :value="drawerVisible"
    :formData="formData"
    @handleCloseEdit="handleClose"
    @handleSubmitEdit="handleSubmit"
    ></page-drawer>
 </template>
 
 <script lang="ts">
 import { Vue, Component } from 'vue-facing-decorator';
 import PageTable from '@/components/page-table/index.vue';
 import PagePagination from '@/components/page-pagination/index.vue';
 import PageHeader from './cpns/page-header.vue';
 import PageDrawer from './cpns/page-drawer.vue';
 
 import { tableData, tableList } from './config';
 
 @Component({
     components:{ PageTable,PagePagination,PageHeader,PageDrawer}
 })
 export default class CategoryAddress extends Vue {
     public data = tableData;
     public list = tableList;
     public drawerVisible:boolean=false
     public formData:any={}
     public tableSize=tableData.length
 
     public handleClose(){
         this.drawerVisible=false
     }
 
     public handleEditClick(info: any) {
         this.drawerVisible=true  
         console.log(info);
         
         this.formData=info
     }
 
     public handleDleClickEmit(info:any){
         console.log(info);
     }
 
     public handleSelectionChange(list:[]){
         console.log(list);
         
     }
 
     // 分页切换
     public handleCurrentChange(current:number){
         console.log(current);
     }
 
     // 新增打开抽屉
     public handleAddClick(){
         this.formData = {}; // 先将 formData 置为空对象
         setTimeout(()=>{
             this.drawerVisible=true
         },250)
     }
 
     // 新增和编辑的提交
     public handleSubmit(data:any){
         tableData.push(data)
     }
 }
 </script>
 
 <style scoped lang="less">
 .page-pagination {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 2vh;
     // transform: translate(-50%,0);
     display: flex;
     align-items: center;
     justify-content: center;
     width: 90%;
     height: 10vh;
     background-color: #fff;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
     margin: 20px auto;
     border-radius: 3vh;
 }
 </style>